<template>
  <header class="header">
    <h2>
      <span>{{modelValue?.plant_name.substring(0,2)}}</span>
      <span>{{modelValue?.plant_name.substring(2,4)}}</span>
    </h2>
    <button :class="'read-more ' + btnClass" @click="handleClick">{{btnText}}</button>
  </header>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Object
    },
    btnText: {
      type: String,
      default: "阅读更多"
    },
    btnClass: {
      type: String,
      default: ""
    }
  },
  methods: {
    handleClick() {
      let routeObj = this.getListUrl(this.$route.params,this.modelValue);
      this.$router.push(routeObj);
    }
  }
}
</script>

<style scoped>
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0px;
    }

    .header>h2>span:nth-child(1) {
      color: var(--base-color)
    }

    .read-more {
      font-size: 110%;
      border: 1px dotted var(--base-color);
      padding: 5px 10px;
      border-radius: 5px;
      background-color: #fff;
      cursor: pointer;
    }
</style>